<template>
    <div class="remake">
        <div class="text">
            <span>网友点评（6551）</span>
                <div class="star">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star-gray.svg" alt="">
                <p style="float:right">4.5</p>
                </div>
            
        </div>

        <div class="user">
            <div class="user_pic">
                <img src="../../../../../assets/style/iconfont/people.svg" alt="">
            </div>
            <div class="user_info">
                <div class="user_name"> 靓崽雷👌</div>
                <div class="user_like">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                </div>
            </div>
            <div class="date" style="font-size:.32rem;margin-top:.3rem;margin-right:.3rem;color:gray;display:block;float:right;" >
                <p >4月24日</p>
            </div>
        </div>

        <div class="comment" style="margin:.3rem .3rem 0 .3rem;font-size:.3rem;line-height:.5rem;text-align:justify;border-bottom:solid .01rem gray;">
            <p>因为各方面的原因。我尝试换了好几种发型，在他们家既能又好看的发型，价格还优惠，你说这么好的事情
                去哪找。感觉就像是给自己找了一个发型师一样，等会就给你们展示展示我的帅气和他们的手艺，不来是你吃亏。
                下面就是见证惊喜的时候。👇👇👇👇👇
            </p>
            <img src="../../../../../assets/style/iconfont/demo/demo1.jpg" alt="">
            <img src="../../../../../assets/style/iconfont/demo/demo2.jpg" alt="">
            <img src="../../../../../assets/style/iconfont/demo/demo3.jpg" alt="">
        </div>

        <div class="user">
            <div class="user_pic">
                <img src="../../../../../assets/style/iconfont/people.svg" alt="">
            </div>
            <div class="user_info">
                <div class="user_name">你好，漂亮</div>
                <div class="user_like">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                    <img src="../../../../../assets/style/iconfont/star.svg" alt="">
                </div>
            </div>
            <div class="date" style="font-size:.32rem;margin-top:.3rem;margin-right:.3rem;color:gray;display:block;float:right;" >
                <p >7月5日</p>
            </div>
        </div>

        <div class="comment" style="margin:.3rem .3rem 0 .3rem;font-size:.3rem;line-height:.5rem;text-align:justify;border-bottom:solid .01rem gray border-bottom: solid .02rem rgb(226, 220, 220);">
            <p>棒棒的技术，朋友们也都是在这里剪的，真心推荐，每天都能每每的出去玩耍，嗨皮啊^_^
            </p>
            <img src="../../../../../assets/style/iconfont/demo/demo4.jpg" alt="">
            <img src="../../../../../assets/style/iconfont/demo/demo5.jpg" alt="">
            <img src="../../../../../assets/style/iconfont/demo/demo6.jpg" alt="">
        </div>

            <div class="more">
                <a href="">
                    <p>查看更多评论</p>
                    <img src="../../../../../assets/style/iconfont/right.svg" alt="">
                </a>
             </div>

            <div class="kong" style="height:.3rem;background-color:rgb(243, 241, 241)"></div>
             <div class="button_middle">
            <div class="box2">
                    <a href="">首页</a>
            </div>
            <div class="box3">
                |
            </div>
            <div class="box2">
                    <a href="">我的</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">美团下载</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">电脑版</a> 
            </div>
            <div class="box3">
                    |
                </div>
            <div class="box2">
                    <a href="">帮助</a> 
            </div>
            
        </div>
        <div class="footer_link" style="padding:.4rem 0;height:1.9rem;width:100%;background-color:rgb(243, 241, 241);">
            友情链接： <a href="" style="color:rgb(18, 190, 167);text-decoration-line: none;">天猫电影</a>
            <p style="margin-top:.3rem;color:;">2019 美团网 京ICP证070791号</p>
        </div>

    </div>
    
</template>

<script>
export default {
    name:"InfoFifth.vue"
}
</script>

<style scoped>
.remake{
    margin-bottom: .2rem;
    height: 7rem;
    /* border-bottom: solid .35rem  */
}
.text{
    content: 80%;
    width: 100%;
    overflow: hidden;
    /* float: left; */
    height: 1rem;
    border-bottom: solid .02rem rgb(226, 220, 220);
    margin-bottom: .2rem;
}
.text span{
    float: left;
    color:#333;
    font-size: .36rem;
    margin-left: .3rem;
    margin-top: .2rem ;
    
}
.text .star{
    width: 4rem;
    /* margin-left: .3rem; */
     float: right;
}
.text .star img{
    width: .5rem;
    /* float: right; */
    margin-top: .18rem;
}
.text .star p{
    width: .5rem;
    float: left;
    font-size: .4rem;
    margin:.23rem .4rem 0 0;
    color: orange;
}
.user{
    height: 1.5rem;
}
.user_pic{
    float: left;
    display: block;
    margin-left: .3rem;
    margin-top: .2rem;
}
.user_pic img{
    width:1rem;
    border: solid  .03rem rgb(18, 190, 167);
    border-radius: .3rem;
}
.user_info {
    width:5rem;
    display:block;
    float:left;
    margin-left: .3rem;
    margin-top: .2rem;
}
.user_info .user_name{
    font-size:.4rem;
    color: rgb(22, 172, 97);
    display:block;
    float:left;
    padding-bottom: .15rem;
     padding-right: 3rem;
}
.user_info .user_like{
    /* width: 100%; */
   display:block;
    float:left;
}
.user_info .user_like img{
   width:.5rem;
}
.comment img{
    width: 30%;
    height: 2.2rem;
    margin:.2rem .2rem .3rem 0;
}
.more{
    width: 95%;
    height: 1.3rem;
    margin-left: .3rem;
    /* border-bottom: solid .4rem  rgb(243, 241, 241); */
}
.more p{
    float: left;
    color: rgb(26, 204, 189);
    font-size: .3rem;
    margin:.35rem 0;
}
.more img{
    width: .45rem;
    float: right;
    margin-top: .3rem;

}






.button_middle{
    padding-top: .3rem;
    background-color: rgb(243, 241, 241);
    padding-top: .02rem;
    float: left;
    height: 45px;
    width: 100%;
}
.box2{
    text-size-adjust: auto;
    text-align: center;
    padding-top: 2px;
    float: left;
    width: 18%;
    height: 30px;
}
.box2 a{
    text-decoration-line: none;
    color: rgb(18, 190, 167);
}
.box3{
    width: 2%;
    float: left;
    height: 30px;
}
</style>
